<template>
	<view class="navTop">
		<u-navbar title="" :is-back="false" :border-bottom="false" title-color="#fff" :background="{background:'#000000'}">
			<view class="page_navbar_warp">
				<image src="../../static/img/1.png" mode="" class="logo"></image>
			</view>
			<view class="page_navbar_warp" slot="right">
				<switchAddress></switchAddress>
				<image src="../../static/img/32.png" mode="" class="logo_right" @click="$go(2,'/pages/index/share')"></image>
				<image src="../../static/img/2.png" mode="" class="logo_right" @click="langShow = !langShow"></image>
				<image src="../../static/img/3.png" mode="" class="logo_right" @click="navShow = !navShow"></image>
			</view>
		</u-navbar>
		<u-popup v-model="navShow" mode="right">
			<view class="navShow">
				<view class="item df-aic-jusb" :class="{'ac':url == 'index'}" @click="$go(3,'/pages/index/index'),navShow=false">
					<view class="df-aic">
						<image src="../../static/img/nav1-1.png" mode="" class="icon" v-if="url == 'index'"></image>
						<image src="../../static/img/nav1.png" mode="" class="icon" v-if="url !== 'index'"></image>
						<text class="fsz-28">{{$t('首页')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'index'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'index'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'assets'}" @click="$go(3,'/pages/assets/assets'),navShow=false">
					<view class="df-aic">
						<image src="../../static/img/nav3-3.png" mode="" class="icon" v-if="url == 'assets'"></image>
						<image src="../../static/img/nav3.png" mode="" class="icon" v-if="url !== 'assets'"></image>
						<text>{{$t('我的资产')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'assets'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'assets'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share'}" @click="$go(2,'/pages/index/share'),navShow=false">
					<view class="df-aic">
						<image src="../../static/img/nav4-4.png" mode="" class="icon" v-if="url == 'share'"></image>
						<image src="../../static/img/nav4.png" mode="" class="icon" v-if="url !== 'share'"></image>
						<text>{{$t('推荐分享')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share'"></image>
				</view>
				 <!-- @click="$toast($t('暂未开放'))" -->
				<view class="item df-aic-jusb" :class="{'ac':url == 'mining'}" @click="$go(2,'/pages/mining/mining')">
					<view class="df-aic">
						<image src="../../static/img/nav2-2.png" mode="" class="icon" v-if="url == 'mining'"></image>
						<image src="../../static/img/nav2.png" mode="" class="icon" v-if="url !== 'mining'"></image>
						<text>{{$t('种子矿机')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'mining'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'mining'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav6.png" mode="" class="icon"></image>
						<text>LP{{$t('挖矿')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav7.png" mode="" class="icon"></image>
						<text>{{$t('生态挖矿')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav13.png" mode="" class="icon"></image>
						<text>Swap</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav8.png" mode="" class="icon"></image>
						<text>{{$t('国际银联卡')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav9.png" mode="" class="icon"></image>
						<text>Dao{{$t('投票')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav10.png" mode="" class="icon"></image>
						<text>{{$t('社区工作室申请')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav11.png" mode="" class="icon"></image>
						<text>{{$t('在线客服')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				<view class="item df-aic-jusb" :class="{'ac':url == 'share2'}" @click="$toast($t('暂未开放'))">
					<view class="df-aic">
						<image src="../../static/img/nav12.png" mode="" class="icon"></image>
						<text>{{$t('帮助中心')}}</text>
					</view>
					<image src="../../static/img/arr1-1.png" mode="" class="arr" v-if="url == 'share2'"></image>
					<image src="../../static/img/arr1.png" mode="" class="arr" v-if="url !== 'share2'"></image>
				</view>
				
			</view>
		</u-popup>
		
		<view class="lang u-text-center" v-if="langShow">
			<view class="item fsz-24 fw-b" v-for="(item,index) in langList" :key="index" @click="changeLang(item)">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			url: {
				type: [String],
			},
		},
		data() {
			return {
				navShow:false,
				langShow:false,
				langList:[
					{name:'简体中文',code:'zh-Hans'},
					{name:'繁體中文',code:'zh-Hant'},
					{name:'English',code:'en'},
					{name:'Malay',code:'ms'},
					{name:'日本語',code:'ja'},
					{name:'한국어',code:'ko'},
					{name:'IndonesiaName',code:'hi'}, // 印尼
					{name:'ภาษาไทย',code:'th'}, // 泰文
					{name:'Tiếng Việt',code:'vi'} // 越南
				],
				applicationLocale:''
			}
		},
		async mounted() {
			uni.hideTabBar()
			this.applicationLocale = uni.getLocale(); // 默认语言
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
				this.$i18n.locale = e.locale;
				uni.setStorageSync('locale', e.locale);
			})
		},
		methods:{
			changeLang(item){
				console.log(item);
				this.applicationLocale = item.code
				this.$i18n.locale = this.applicationLocale
				uni.setStorageSync('locale', this.$i18n.locale)
				uni.setLocale(this.$i18n.locale);
				this.langShow = false;
				this.$emit('langUpdata'); // 多语言通知接口更新数据
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.navTop{
		.lang{
			width: 200rpx;
			background: #1A1B1D;
			border-radius: 20rpx;
			position: fixed;
			top: 44px;
			right: 30rpx;
			padding: 30rpx 0;
			z-index: 9;
			.item{
				height: 65rpx;
				line-height: 65rpx;
			}
		}
		.logo{
			width: 148rpx;
			height: 56rpx;
		}
		.logo_right{
			width: 52rpx;
			height: 52rpx;
			margin-left: 20rpx;
		}
		/deep/.u-drawer{
			.u-drawer-right{
				top: 44px;
			}
			.navShow{
				background: #141516;
				height: 100%;
				padding: 30rpx 0;
				.item{
					width: 400rpx;
					height: 65rpx;
					padding-left: 30rpx;
					margin-bottom: 20rpx;
					padding-right: 25rpx;
				}
				.ac{
					background: #6CE844;
					color: #181818;
				}
				.icon{
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
				.arr{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
</style>